<template>
  <div class="navbar">
    <a
      v-bind:class="{ back: hasBack }"
      v-on:click="back"
      class="navbar-left"
      href="javascript:;"
    >
      {{ hasBack ?  '返回' : ''}}
    </a>
    <div class="navbar-title">{{ title }}</div>
    <a
      v-if="hasMenu"
      v-on:click="toggleMenu"
      v-bind:class="{ menu: hasMenu }"
      class="navbar-right"
      href="javascript:;"
    >
      {{ hasMenu ? '菜单' : ''}}
    </a>
  </div>
</template>

<script>
  import $ from '../assets/util'

  export default {
    name: 'navbar',
    props: {
      title: {
        type: String,
        default: '房租缴费'
      },
      hasBack: {
        type: Boolean,
        default: true
      },
      hasMenu: {
        type: Boolean,
        default: false
      },
      backToApp: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      back() {
        if (this.backToApp) {
          $.backToApp()
        } else {
          this.$router.go(-1)
        }
      },

      toggleMenu() {
        this.$emit('toggleMenu')
      }
    }
  }
</script>

<style lang="less" scoped>
  .navbar {
    display: flex;
    align-items: center;
    height: 44px;
    line-height: 44px;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #dedede;
    background-color: rgba(255,255,255,0.9);
    z-index: 1024;
    &::after {
      content: "";
      display: block;
      clear: both;
    }
  }

  .navbar-left,
  .navbar-right {
    width: 25%;
    display: block;
    color: inherit;
    text-align: center;
    text-decoration: none;
    &:active {
      opacity: .5;
    }
  }

  .navbar-left {
    float: left;
  }

  .navbar-right {
    float: right;
  }

  .navbar-title {
    float: left;
    width: 50%;
    font-size: 17px;
    color: #212121;
    text-align: center;
  }

  .navbar-left.back {
    position: relative;
    text-indent: -9999em;
    &::before {
      position: absolute;
      top: 50%;
      left: 15px;
      margin-top: -7px;
      content: " ";
      display: block;
      width: 10px;
      height: 14px;
      background: url(../assets/icon-back.png) no-repeat left top;
      background-size: 100% 100%;
    }
    background-size: 10px 14px;
  }

  .navbar-right.menu {
    position: relative;
    text-indent: -9999em;
    &::after {
      position: absolute;
      top: 50%;
      right: 15px;
      margin-top: -6px;
      content: " ";
      display: block;
      width: 17px;
      height: 12px;
      background: url(../assets/icon-menu.png) no-repeat left top;
      background-size: 100% 100%;
    }
  }
</style>
